<template>
	<div class="page">
	  <div class="page-title">
	    <div class="page-title-left">
	      <span>{{title}}</span>
	      <span>({{money}})</span>
	    </div>
	  </div>
	  <div class="page-main">
	    <el-form ref="form" :model="form" label-width="85px">
	      <el-row>
	        <el-col :span="10">
	          <el-form-item label="发布时间段">
	            <el-date-picker v-model="form.starttime" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" style="width: 140px;"></el-date-picker>~
	            <el-date-picker v-model="form.endtime" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" style="width: 140px;"></el-date-picker>
	          </el-form-item>
	        </el-col>
	        <el-col :span="14">
	          <el-form-item label="公司名称">
	            <el-input v-model="form.companyname" placeholder="请输入公司名称" style="width: 200px;" clearable></el-input>
	          </el-form-item>
	        </el-col>
	      </el-row>
	      <el-row>
	        <el-col :span="7">
	          <el-form-item label="所在地区">
	            <city-Cascader :citys="form.citys" :level="level" :notRequire="true" @handleChange="handleCityChange" style="width: 190px;"></city-Cascader>
	          </el-form-item>
	        </el-col>
	        <el-col :span="7" style="text-align: right;">
	          <el-button type="primary" style="width: 120px;" @click="query">查询</el-button>
	        </el-col>
	      </el-row>
	    </el-form>
	    <div v-loading="loading">
	      <el-table :data="tableData" stripe style="margin-bottom: 22px;" size="small" border>
	        <el-table-column  prop="companyname" label="公司名称" align="center">
				<template scope="scope">
					<el-button @click="openDialog(scope.row,'checkFlag')" type="text" size="small">{{scope.row.companyname}}</el-button>
				</template> 
			</el-table-column>
	        <el-table-column  prop="positionname" label="职位名称" align="center">
				<template scope="scope">
					<el-button @click="openDialog(scope.row,'detailFlag')" type="text" size="small">{{scope.row.positionname}}</el-button>
				</template> 
			</el-table-column>
	        <el-table-column  prop="nickname" label="入职者昵称" align="center">
				<template scope="scope">
					<el-button @click="openDialog(scope.row,'dialogVisible')" type="text" size="small">{{scope.row.nickname}}</el-button>
				</template> 
			</el-table-column>
	        <el-table-column  prop="region" label="所在地区" align="center"></el-table-column>
	        <el-table-column  prop="insertdate" label="发布日期" align="center"></el-table-column>
	        <el-table-column  prop="entrydate" label="入职日期" align="center"></el-table-column>
	        <el-table-column  prop="safeguard" label="过保障期日期" align="center"></el-table-column>
	        <el-table-column  prop="paymoney" label="支付费用" align="center"></el-table-column>
	        <el-table-column  prop="paydate" label="支付时间" align="center" v-if="type == 'paid'"></el-table-column>
	        <el-table-column  label="操作" align="center" v-if="type == 'unpaid'">
	          <template slot-scope="scope">
	            <el-button @click="openDialog(scope.row,'warnDialogVisible')" type="text" size="small">提醒</el-button>
	          </template>
	        </el-table-column>
	      </el-table>
	      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pagenum" :page-sizes="[10, 20, 30, 50, 100]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total" background></el-pagination>
	    </div>
	  </div>
	  
	  <!-- 公司详情弹框 -->
	  <el-dialog
		:visible.sync="checkFlag"
		width="1040px"
		class="jhdialog"
	  >
	    <check
			v-if="checkFlag"
			:companyName="userInfo.companyname"
			:companyId="userInfo.companyid"
			:type="'0'"
			:tabNum="'4'"
	    ></check>
	  </el-dialog>
	  <!-- 职位详情弹窗模板 -->
	  <el-dialog :visible.sync="detailFlag" width="800px" center>
		<position-info v-if="detailFlag" :id="userInfo.positionid"
			:company="userInfo.companyname">
		</position-info>
	  </el-dialog>
	  <!-- 会员信息弹窗模板 -->
	  <el-dialog :visible.sync="dialogVisible" width="1040px">
	  	<resume-detail
	  		v-if="dialogVisible"
	  		:userid="userInfo.userid"
	  		:nickName="userInfo.nickname"
	  		:isShowTelphone="true"
	  	></resume-detail>
	  </el-dialog>
	  <!-- 提醒弹窗 -->
	  <el-dialog :visible.sync="warnDialogVisible" width="500px" @close="warnDialogVisible = false">
	    <div class="warn-dialog-header">
	      <span>提醒操作</span>
	    </div>
	    <div class="warn-dialog-body">
	      <div class="warn-dialog-body-title">发送内容</div>
	      <el-input
	        type="textarea"
	        :rows="6"
	        v-model.trim="textarea"
	        placeholder="请输入提醒内容"
	      ></el-input>
	      <div class="warn-dialog-btn">
	        <el-button style="margin-right: 30px;" @click="warnDialogVisible = false">取消</el-button>
	        <el-button type="primary" @click="warn">确定</el-button>
	      </div>
	    </div>
	  </el-dialog>
	</div>
</template>

<script>
import check from "../../socical/socialCheck/check.vue";
import positionInfo from "../../socical/post/positionInfo.vue";
export default {
	name: 'punish',
	components: {
		cityCascader: () => import("../../../component/cityCascader/index.vue"),
		resumeDetail: () => import("../../../component/resumeDetail/index.vue"),
		check,positionInfo,
	},
	data() {
		return {
			type:'',												//标题类型
			title: '企业未支付订单总金额',								//标题
			money: 0,												//标题金额
			form: {													//条件列表
				starttime: '',											//开始时间
				endtime: '',											//结束时间
				companyname: "",										//公司名称
				province: "",											//省
				city: "",												//市
				area: "",												//区
				citys: [],												//所在地
			},
			level: '0',
			tableData: [
				/* {
					companyName: 'xxxx有限公司',							//公司名称
					jobName: '刷盘子',									//职位名称
					nickname: '会飞的鱼',								//入职者昵称
					region: 'xxxxx地方',									//所在地区
					createTime: '2020-06-22 12:00',						//发布日期
					entryTime: '2020-07-12 12:00',						//入职日期
					expirationTime: '2020-8-11 12:00',					//过保障期时间
					money: 888,											//支付费用
					payTime: '2020-05-11 12:00',						//支付时间
				}, */
			],
			checkFlag: false,											//是否显示公司详情模板
			detailFlag: false,											//是否显示职位详情模板
			userInfo:{},												//当前点击的用户信息
			loading: false,
			detail: {},
			dialogVisible: false,										//是否显示会员信息弹窗
			warnDialogVisible: false,									//提醒弹窗是否显示
			textarea: '',												//提醒内容
			
			total: 0,												//总数据条数
			pagenum: 1,												//当前页码
			pagesize: 10,											//每页显示多少条数据
		}
	},
	created() {
		this.type = this.$route.params.type;
		if(this.type == 'unpaid'){
			this.title = '企业未支付订单总金额';
		}else{
			this.title = '企业已支付订单总金额'
		}
		this.getTableData();
	},
	methods: {
		// 选择城市
		handleCityChange(val) {
			this.form.citys = val;
			this.form.province = val[0];
			this.form.city = val[1];
			this.form.area = val[2];
		},
		getTableData(form) {
			let params = {
				pageNum: this.pagenum,
				paystatus: this.type=='unpaid'?'0':'1'
			};
			if(form){
				Object.assign(params,form);
			}
			console.log(params);
			this.$axios.$post('/app/v1/common/payList',params).then(res => {
				console.log(res);
				if(res.data.code === 1){
					let result = res.data.data;
					this.money = result.payTotal;
					this.total = Number(result.totalnum);
					this.tableData.splice(0);
					result.companyPayedResponseList.forEach(item => {
						item.region = item.province + '-' + item.city + '-' + item.area;
						this.tableData.push(item);
					})
					
				}else{
					this.$message({
						message: res.data.message,
						type: 'warning'
					})
				}
			})
		},
		// 查询
		query() {
			console.log(this.form);
			let searchForm = {};
			if(this.form.starttime != ''){
				searchForm.starttime = this.form.starttime;
			}
			if(this.form.endtime != ''){
				searchForm.endtime = this.form.endtime;
			}
			if(this.form.starttime != '' && this.form.endtime != ''){
				let starttime = Date.parse(this.form.starttime);
				let endtime = Date.parse(this.form.endtime);
				if (starttime > endtime) {
					this.$message({
						message: '开始时间不能大于结束时间',
						type: 'error'
					});
					return false;
				}
			}
			if(this.form.companyname != ''){
				searchForm.companyname = this.form.companyname;
			}
			if(this.form.city != ''){
				searchForm.city = this.form.city;
			}
			if(this.form.province != ''){
				searchForm.province = this.form.province;
			}
			if(this.form.area != ''){
				searchForm.area = this.form.area;
			}
			
			this.getTableData(searchForm);
		},
		// 重置
		reset() {
			["startdate", "enddate", "companyname", "province", "city", "area"].forEach(el => {
				this.form[el] = "";
			})
			this.form.citys = [];
		},
		// 分页
		handleCurrentChange(val) {
			this.pagenum = val;
			this.getTableData();
		},
		handleSizeChange(val) {
			this.pagenum = 1;
			this.pagesize = val;
			this.getTableData();
		},
		// 打开公司详情/职位详情/会员信息/提醒弹窗
		openDialog(data,type){
			this.userInfo = data;
			this[type] = true;
			 console.log('1111111')
			 console.log(data);
		},
		// 提交提醒信息
		warn(){
			if(this.textarea == ''){
				this.$message({
					message: '提醒内容不能为空!',
					type: 'warning'
				})
				return false;
			}
			let params = {
				positionname: this.userInfo.positionname,
				userId: this.userInfo.userid,
				context: this.textarea
			}
			this.$axios.$post('/app/v1/common/remind',params).then(res => {
				console.log(res);
				if(res.data.code === 1){
					this.$message({
						message: '提醒成功!',
						type: 'success'
					})
					this.textarea = '';
				}else{
					this.$message({
						message: res.data.message,
						type: 'warning'
					})
				}
				this.warnDialogVisible = false;
			})
		}
	}
}
</script>

<style scoped="scoped">
.page {
  min-width: 1060px;
  background-color: #eff1f8;
  box-sizing: border-box;
  padding: 10px;
}

.page-title {
  display: flex;
  justify-content: space-between;
  background-color: #fff;
  padding: 0 20px;
  border-bottom: 1px solid #ddd;
}

.page-title-left {
  font-size: 18px;
}

.page-title-left::before {
  content: "";
  border-left: 12px solid #0064e4;
  margin-right: 10px;
  line-height: 60px;
}

.page-title-left span:nth-of-type(2) {
  color: #08b60c;
}

.page-title-right {
  display: flex;
  align-items: center;
}

.page-main {
  background-color: #fff;
  padding: 22px 20px;
}

.dialog-title {
  display: flex;
  justify-content: space-between;
  background-color: #fff;
  padding: 0 20px;
  border-bottom: 1px solid #ddd;
}

.dialog-title-left {
  font-size: 18px;
}

.dialog-title-left::before {
  content: "";
  border-left: 12px solid #0064e4;
  margin-right: 10px;
  line-height: 60px;
}

.dialog-main {
  padding: 20px;
  font-size: 16px;
}

.dialog-main .el-row {
  margin-bottom: 28px;
}

.dialog-main .el-row:nth-last-of-type(1) {
  margin-bottom: 60px;
}	

.warn-dialog-header {
  font-size: 16px;
  box-sizing: border-box;
  padding: 20px;
  border-bottom: 1px solid #bfbfbf;
}

.warn-dialog-header::before {
  content: "";
  border-left: 8px solid #0064e4;
  margin-right: 10px;
}

.warn-dialog-body {
  box-sizing: border-box;
  padding: 20px;
}

.warn-dialog-body-title {
  font-size: 16px;
  margin-bottom: 20px;
}

.warn-dialog-btn {
  margin-top: 20px;
  text-align: center;
}
</style>
